@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-alert';
@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';

$colors: 'neutral', 'primary', 'red', 'yellow', 'green';

.alert {
  @include composite-var($alert-container-container);

  display: flex;
  flex-direction: column;

  box-sizing: border-box;
  min-width: 256px;

  border-style: solid;

  @each $color in $colors {
    &[data-color='#{$color}'] {
      background-color: simple-var($theme-variables, 'sys', $color, 'background');
      border-color: simple-var($theme-variables, 'sys', $color, 'decor-default');
    }
  }
}

.body {
  @include composite-var($alert-container-body);

  display: flex;
  box-sizing: border-box;
  width: 100%;
}

.icon {
  @each $color in $colors {
    &[data-color='#{$color}'] {
      color: simple-var($theme-variables, 'sys', $color, 'accent-default');
    }
  }

  width: $icon-s;
  height: $icon-s;

  svg {
    max-width: $icon-s;
    max-height: $icon-s;
  }
}

.contentLayout {
  @include composite-var($alert-container-content-layout);

  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.title {
  @include composite-var($sans-title-s);

  color: $sys-neutral-text-main;
}

.description {
  @include composite-var($sans-body-m);

  color: $sys-neutral-text-support;
  word-wrap: break-word;
}

.footer {
  @include composite-var($alert-container-footer);

  position: relative;

  display: flex;
  flex-direction: row-reverse;
  align-items: center;

  width: 100%;
}
